<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>CSS 示例页面</title>
    <!-- External CSS -->
    <style>
        /* Internal CSS */
        body {
            background-image: url('apple.jpg');
            /*background-size: cover; /* 拉伸背景图片以覆盖整个页面 */
            background-repeat: no-repeat; /* 不重复背景图片 */
            font-family: "楷体", "KaiTi";
        }
        h2 {
            color: green;
        }
        h1 {
            color: blue;
        }
        .content {
            font-size: 16px;
        }
        .class1 {
            color: green;
        }
        .class2 {
            font-weight: bold;
        }
        #id3 {
            color: red;
        }
        #id1 {
            background-color: yellow;
        }
        #id2 {
            text-decoration: underline;
        }
        .parent .child {
            color: red;
        }
        .parent > .child {
            color: orange;
        }
        .sibling1 + .sibling2 {
            color: purple;
        }
        .sibling1 ~ .sibling3 {
            color: brown;
        }
        a:link {
            color: blue;
        }
        a:visited {
            color: purple;
        }
        a:hover {
            color: red;
        }
        a:active {
            color: orange;
        }
        input:focus {
            background-color: lightblue;
        }
        .pseudo-element::after {
            content: " - 这是伪元素添加的文字";
            color: gray;
        }
        .pseudo-element::selection {
            color: white;
            background: black;
        }
        [data-attribute] {
            color: pink;
        }
        [data-attribute="value"] {
            font-style: italic;
        }
        ul {
            list-style-image: url('bullet.png');
            padding-left: 20px;
        }
        table {
            border-collapse: collapse;
            width: 100%;
        }
        th {
            background-color: #f2f2f2;
            color: black;
        }
        td, th {
            border: 1px solid black;
            padding: 8px;
            text-align: center;
        }
    </style>
</head>
<body>

<!-- Inline CSS -->
<h1 style="color: red;">这是一个标题</h1>
<!-- inline css优先级最高 -->
<!-- Internal 和 External CSS优先级看调用顺序 -->
<h2>这是另一个标题</h2>
<p class="content">这是文章的内容。</p>

<!-- 类选择器和ID选择器 -->
<p class="class1">这是应用了类选择器 class1 的段落。</p>
<p class="class2 class1">这是应用了类选择器 class2 的段落。</p>
<!-- 一个class可以被多次使用，一个元素可以使用多个class-->
<p id="id1">这是应用了ID选择器 id1 的段落。</p>
<p id="id2">这是应用了ID选择器 id2 的段落。</p>
<p id="id3" class="class1">这是应用了ID选择器 id3 的段落。</p>
<!-- 一个id只能被使用一次（不会报错），一个元素只能有一个id（会报错） -->
<!-- 选择器的优先级：id选择器 > 类选择器 > 标签选择器 -->

<!-- 后代选择器和子元素选择器 -->
<div class="parent">
  <p class="child">这是后代选择器的例子。</p>
  <div>
    <p class="child">这是子元素选择器的例子。</p>
  </div>
</div>
<!-- 后代选择器：选择所有后代元素，不包括后代元素的后代元素，子元素选择器：选择所有子元素 -->

<!-- 相邻兄弟选择器和后续兄弟选择器 -->
<div>
  <p class="sibling1">这是相邻兄弟选择器的例子。</p>
  <p class="sibling2">这是相邻兄弟选择器的目标。</p>
  <p class="sibling2">这不是相邻兄弟选择器的目标。</p>
  <p class="sibling3">这是后续兄弟选择器的目标。</p>
  <p class="sibling3">这是后续兄弟选择器的目标。</p>
</div>
<p class="sibling3">这不是后续兄弟选择器的目标。</p>
<!-- 相邻兄弟选择器：选择紧接在同一父元素下的元素，后续兄弟选择器：选择在同一父元素下的所有后续元素 -->

<!-- 伪类选择器 -->
<a href="https://www.example.com">这是一个超链接</a>
<input type="text" placeholder="输入框">

<!-- 伪元素选择器 -->
<p class="pseudo-element">这是一个带有伪元素的段落。</p>

<!-- 属性选择器 -->
<p data-attribute="value">这是一个带有自定义属性的段落。</p>

<!-- 列表 -->
<ul>
    <li>列表项 1</li>
    <li>列表项 2</li>
</ul>

<!-- 表格 -->
<table>
    <tr>
        <th>表头 1</th>
        <th>表头 2</th>
    </tr>
    <tr>
        <td>单元格 1</td>
        <td>单元格 2</td>
    </tr>
</table>

</body>
</html>
